<template>
  <div class="container">
    <el-card v-for="item in homeList" :key="item.id" class="app-container">
      <div class="headerbox">
        <p>{{ item.name }}</p>
        <div class="htext">
          <div class="item">
            <span>考核指标 :</span>
            <span>{{ item.kpiname }}</span>
          </div>
          <div class="hfootertext">
            <div class="item">
              <span>检查周期 :</span>
              <span>{{ ary[item.cycle_type - 1] }}</span>
            </div>
            <div class="itemtime">
              <span>生效时间 :</span>
              <span>{{ item.begin_time }}~{{ item.end_time }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bannerbox">
        <ul>
          <div class="abcbox">
            <span class="bannerselect"> A </span>
            <span class="bannertitle">业务预警情况</span>
            <span class="warningback">业务预警回顾</span>
          </div>

          <div class="banneritem">
            <img class="bannerimg" src="../../assets/home/warning.png">
            <div class="bannertext">
              最近一次预警发生于{{ item.week_warning_time }}，触发了<span>{{
                item.week_warning_level
              }}</span>
            </div>
          </div>
          <div class="banneritem">
            <div
              v-if="item.weekKpiVoList[0] || item.weekKpiVoList[0]"
              class="bannerkao"
            />
            <div class="fbanner">
              <div v-if="item.weekKpiVoList[0]">
                当{{ item.week_warning_time }}考核指标<span>{{
                  item.weekKpiVoList[0] ? item.weekKpiVoList[0].kpi_name : ''
                }}</span>触发预警,数值为<span>{{
                  item.weekKpiVoList[0] ? item.weekKpiVoList[0].kpi_value : ''
                }}</span>
              </div>
              <div v-if="item.weekKpiVoList[0]">
                下级指标触发预警有{{
                  item.weekKpiVoList[0] ? item.weekKpiVoList[0].org_count : ''
                }}个:
                <span>{{
                  item.weekKpiVoList[0] ? item.weekKpiVoList[0].org_names : ''
                }}</span>
              </div>
            </div>
          </div>
        </ul>
        <ul>
          <div class="bannertwo">
            <div class="abcbox">
              <span class="bannerselect"> B </span>
              <span class="bannertitle">业务联动情况</span>
            </div>
            <div class="tag">
              平台触发:
            </div>
            <div class="banneritem">
              <div class="bannerkao" />
              <li>
                平台自动发送预警短信
                <span
                  @click="
                    () => {
                      handleMsmDialog(item.id)
                    }
                  "
                >{{ item.warning_count }}</span>条
              </li>
            </div>
            <div class="banneritem">
              <div class="bannerkao" />
              <li>
                平台自动生成销项父任务
                <span
                  @click="
                    () => {
                      handleSalesDialog(item.id)
                    }
                  "
                >{{ item.task_count }}</span>个
              </li>
            </div>
            <!-- <sales-task-detail /> -->
            <div class="banneritem">
              <div class="bannerkao" />
              <li>
                平台自动生成整改建议
                <span
                  @click="
                    () => {
                      handleSuggestDialog(item.id)
                    }
                  "
                >{{ item.improve_count }}</span>份
              </li>
            </div>

            <div class="feedback">
              <div class="tag">
                执行反馈:
              </div>
              <div class="banneritem">
                <div class="bannerkao" />
                <div>
                  销项父任务已确认接收<span
                    @click="
                      () => {
                        handleSalesDialog(item.id)
                      }
                    "
                  >{{ item.task_cn_count }}</span>剩余
                  <span
                    @click="
                      () => {
                        handleSalesDialog(item.id)
                      }
                    "
                  >{{ item.task_un_count }}</span>
                  未确认
                </div>
              </div>
              <div class="banneritem">
                <div class="bannerkao" />
                <div>
                  <span
                    @click="
                      () => {
                        handleSalesDialog(item.id)
                      }
                    "
                  >{{ item.task_count }}</span>销项父任务创建了
                  <span
                    @click="
                      () => {
                        handleSalesDialog(item.id)
                      }
                    "
                  >{{ item.child_task_count }}</span>
                  子任务
                </div>
              </div>
              <div class="banneritem">
                <div class="bannerkao" />
                <div>
                  平台发出的<span
                    @click="
                      () => {
                        handleSuggestDialog(item.id)
                      }
                    "
                  >{{ item.improve_count }}</span>整改建议已被接收<span
                    @click="
                      () => {
                        handleSuggestDialog(item.id)
                      }
                    "
                  >{{ item.improve_yes_count }}</span>剩余
                  <span
                    @click="
                      () => {
                        handleSuggestDialog(item.id)
                      }
                    "
                  >{{ item.improve_no_count }}</span>
                  未查看
                </div>
              </div>
              <div class="banneritem">
                <div class="bannerkao" />
                <div>
                  平台接收的整改报告<span
                    @click="
                      () => {
                        handleReportDialog(item.id)
                      }
                    "
                  >{{ item.improve_report_count }}</span>份
                </div>
              </div>
            </div>
          </div>
        </ul>
        <ul>
          <div class="abcbox">
            <span class="bannerselect"> C </span>
            <span class="bannertitle">业务最新情况</span>
          </div>
          <div class="banneritem">
            <img class="bannerimg" src="../../assets/home/warning.png">
            <div class="bannertext">
              当前预警级别为<span> {{ item.now_warning_level }}</span>
            </div>
          </div>
          <div class="banneritem">
            <div
              v-if="item.nowKpiVoList[0] || item.nowKpiVoList[0]"
              class="bannerkao"
            />
            <div class="fbanner">
              <div v-if="item.nowKpiVoList[0]">
                当前考核指标<span>{{
                  item.nowKpiVoList[0] ? item.nowKpiVoList[0].kpi_name : ''
                }}</span>的数值为<span>{{
                  item.nowKpiVoList[0] ? item.nowKpiVoList[0].kpi_value : ''
                }}</span>
              </div>
              <div v-if="item.nowKpiVoList[0]">
                下级指标触发预警有{{
                  item.nowKpiVoList[0] ? item.nowKpiVoList[0].org_count : ''
                }}个:
                <span>{{
                  item.nowKpiVoList[0] ? item.nowKpiVoList[0].org_names : ''
                }}</span>
              </div>
            </div>
          </div>
        </ul>
      </div>
    </el-card>
    <template v-if="smsVisible">
      <el-dialog
        :bussiness-id="bussinessId"
        title="短信记录"
        :visible="smsVisible"
        :before-close="() => (smsVisible = false)"
      >
        <sms-record :id="smsRecordId" />
      </el-dialog>
    </template>
    <template v-if="salesVisible">
      <el-dialog
        :bussiness-id="bussinessId"
        title="销项任务"
        :visible="salesVisible"
        :before-close="() => (salesVisible = false)"
      >
        <sales-task :id="salesTaskId" />
      </el-dialog>
    </template>
    <template v-if="suggestVisible">
      <el-dialog
        :bussiness-id="bussinessId"
        title="整改建议"
        :visible="suggestVisible"
        :before-close="() => (suggestVisible = false)"
      >
        <RectifySuggest :id="suggestId" />
      </el-dialog>
    </template>
    <template v-if="reportVisible">
      <el-dialog
        :bussiness-id="bussinessId"
        :visible="reportVisible"
        title="整改报告"
        :before-close="() => (reportVisible = false)"
      >
        <correction-report :id="reportId" />
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { fetchHomeList } from '@/api/home/home'
import { SmsRecord } from '@/components'
import { SalesTask } from '@/components/index'
import RectifySuggest from '@/components/RectifySuggest'
import CorrectionReport from '@/components/CorrectionReport'

export default {
  components: { SmsRecord, SalesTask, RectifySuggest, CorrectionReport },
  // components: { SalesTaskDetail },
  data() {
    return {
      reportId: '', // 整改报告弹窗业务id
      bussinessId: '',
      smsVisible: false, // 短信预警弹窗
      salesVisible: false, // 销项任务弹窗
      suggestVisible: false,
      reportVisible: false, // 整改报告弹窗
      homeList: [],
      businessList: [],
      ary: ['每天', '每周', '每月', '每季度', '每年']
    }
  },
  mounted() {
    this.postFindPage()
  },
  methods: {
    postFindPage() {
      // 获取列表
      fetchHomeList({
        ...this.queryFormData
      }).then(res => {
        const { homeBusinessData, homeBusinessKpiData } = res
        const bussinessId = []
        homeBusinessData.forEach(item => {
          const { id } = item
          bussinessId.push(id)
        })
        this.homeList = homeBusinessData
        console.log(homeBusinessData.cycle_type)
        this.businessList = homeBusinessKpiData
        this.bussinessId = bussinessId
        // this.ary = homeBusinessKpiData.cycle_type
      })
    },
    handleMsmDialog(id) {
      this.smsRecordId = id
      this.smsVisible = true
    },
    handleSalesDialog(id) {
      this.salesTaskId = id
      this.salesVisible = true
      console.log(id)
    },
    handleSuggestDialog(id) {
      this.suggestId = id
      this.suggestVisible = true
    },
    handleReportDialog(id) {
      this.reportId = id
      this.reportVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
